<template>
  <button @click="activeIndex = 0">home</button>
  <button @click="activeIndex = 1">movie</button>
  <button @click="activeIndex = 2">about</button>
  <hr />
  <button @click="flag = !flag">toggle</button>
  <hr />

  <div v-if="flag">
    <!-- max 的属性值必须是数字 -->
    <!-- <keep-alive :max="2"> -->
    <!-- <keep-alive include="Home,About"> -->
    <!-- <keep-alive :include="/Home|Movie/"> -->
    <keep-alive :include="['Home', /Movie|About/]">
      <component :is="tabs[activeIndex]" />
    </keep-alive>
  </div>
</template>

<script setup>
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

import { ref } from 'vue'

const tabs = [Home, Movie, About]
const activeIndex = ref(0)

const flag = ref(true)
</script>

<style scoped></style>
